/*
 * @Description: 常用工具类
 * @Autor: 于基庆
 * @Date: 2019-11-26 14:52:24
 * @LastEditors: 于权礼
 * @LastEditTime: 2020-12-01 16:00:57
 */

// 单位转换  px 转换为 rem
@function rem($px) {
    @return $px / 100px * 1rem; //100px为根字体大小
}

// 高度宽度100%
.main {
    height: 100%;
    width: 100%;
}

// 高度100%
.h {
    height: 100%;
}

// 宽度 100%
.w {
    width: 100%;
}

// 禁止选中文本
.no-text {
    user-select: none;
}

// 鼠标抓手
.cursor {
    cursor: pointer;
}

// 表单按钮
.ever-form-but {
    text-align: center;
}

// 表单弹框宽度 一列
.ever-form-1 {
    .el-dialog {
        width: 400px;
    }
    // 整行
    .item-line {
        width: 316px;
        > div {
            width: 216px;
        }
        .el-cascader,
        .el-select {
            width: 100%;
        }
    }
    // 提交按钮
    .item-btn {
        width: 100%;
        text-align: center;
    }
    // 拥有提示按钮的 框
    .prompt {
        .el-input {
            width: calc(100% - 40px);
        }
        i {
            position: relative;
            left: 5px;
            color: #999;
        }
    }
}
// 表单弹框宽度 1.5列
.ever-form-1-5 {
    .el-dialog {
        width: 550px;
    }
    // 整行
    .item-line {
        > div {
            width: 385px;
        }
        .el-cascader,
        .el-select {
            width: 100%;
        }
    }
    // 提交按钮
    .item-btn {
        width: 100%;
        text-align: center;
    }
    // 拥有提示按钮的 框
    .prompt {
        .el-input {
            width: calc(100% - 40px);
        }
        i {
            position: relative;
            left: 5px;
            color: #999;
        }
    }
}
// 表单弹框宽度 二列
.ever-form-2 {
    .el-dialog {
        width: 710px;
    }
    // 整行
    .item-line {
        width: 644px;
        > div {
            width: 544px;
        }
        .el-cascader,
        .el-select {
            width: 100%;
        }
    }
    // 提交按钮
    .item-btn {
        width: 100%;
        text-align: center;
    }
    // 拥有提示按钮的 框
    .prompt {
        .el-input {
            width: calc(100% - 40px);
        }
        i {
            position: relative;
            left: 5px;
            color: #999;
        }
    }
}


// 表格头部 按钮栏
.ever-btns,
.ever-toolbar {
    position: relative;
    padding: 10px 20px;
}

// 清除浮动
.clearfix {
    *zoom: 1;
    /*IE/7/6*/
    &::after,
    &::before {
        content: "";
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    &::after {
        clear: both;
    }
}

// input, button, select, textarea样式清除
.clear-input,
.clear-button,
.clear-select,
.clear-textarea {
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 0;
}

// 表单提交按钮
button.ever-but,
a.ever-but {
    padding-left: 80px;
    padding-right: 80px;
}

/********** BI Start **********/
.bi {
    // 容器
    width: 100%;
    height: 100%;

    // 内容居中
    &.center,
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    // 垂直分布
    .column {
        flex-direction: column;
    }
}
/********** BI End **********/



/********** 布局 Start **********/
%homve {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
%ever-title {

    // 标题 待删除
    .ever-title {
        padding-left: 10px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #F2F2F2;
        font-size: 12px;
        color: #666;
        font-weight: bold;
        margin: 0 10px;
    }

    // 内容 待删除
    .ever-content {
        height: calc(100% - 40px);
        overflow: auto;
        position: relative;
    }

    // 标题
    .ever-main-item__title {
        padding-left: 10px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #F2F2F2;
        font-size: 12px;
        color: #666;
        font-weight: bold;
        margin: 0 10px;
    }

    // 内容
    .ever-main-item__content {
        height: calc(100% - 40px);
        overflow: auto;
        position: relative;
    }

    // 标题
    .item__title {
        padding-left: 10px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #F2F2F2;
        font-size: 12px;
        color: #666;
        font-weight: bold;
        margin: 0 10px;
    }

    // 内容
    .item__content {
        height: calc(100% - 40px);
        overflow: auto;
        position: relative;
    }
}
// 单列
.ever-home {
    @extend %homve;
    @extend %ever-title;
    overflow: auto;
    background: #fff;
}
// 多列
.ever-home-rank {
    @extend %homve;
    @extend %ever-title;
    background: transparent;
    overflow: hidden;

    .ever-main {
        height: 100%;
        >.el-col {
            height: 100%;
            background-color: #fff;
            background-clip: content-box;
            overflow: auto;
            position: relative;
        }
        .ever-main-item {
            height: 100%;
            width: 100%;
            background: #fff;
            overflow: auto;
            position: relative;
        }
    }

    // 待删除
    .ever-h {
        height: 100%;

        >.el-col {
            height: 100%;

            .ever-main {
                height: 100%;
                width: 100%;
                background: #fff;
                overflow: auto;
                position: relative;
            }
        }
    }
}
/********** 布局 End **********/


// table 头部去掉超出隐藏属性 给列筛选使用
.ever-table-filtrate {
    &.el-table th,
    &.el-table .cell,
    &.el-table th div {
        overflow: visible;
    }
}

// 数字看板标题字体
.title-txt {
    margin: 0 auto;
    height: 3.125rem;
    font-size: 2.25rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(82, 215, 246, 1);
    line-height: 3.125rem;
    letter-spacing: 0.0625rem;
    background: linear-gradient(180deg, rgba(181, 247, 252, 1) 0%, rgba(31, 149, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

// 宫宁 常用**************************
/*1rem 的单位, 1rem = 16px */

$rem-unit: 16px;

/*颜色定义*/
/*主色*/
$color-blue: #409eff;
$color-red: #f56c6c;
$color-gelb: #f39c12;
$color-blau: #0d88c4;
$color-green: #008000;
$color-fff: #fff;

/*下划线 | 边框*/
$color-underline: #dddddd;

/*背景*/
$color-bg: #f5f5f5;

/*常用字体颜色-灰*/
$color-font: #606266;

/*
@return 转换后的单位 ××rem。
*/

@function unit-convertor($n) {
    @return ($n/$rem-unit) + rem;
}

@media screen and (min-width: 1920px) and (max-width: 3840px) {
    html {
        font-size: $rem-unit;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
    html {
        font-size: 12px;
    }
}

// 分隔线
.underline {
    @extend .w100p;
    border-top: unit-convertor(1px) solid $color-underline;
}

.underline-blue-s {
    @extend .w90p;
    border-top: unit-convertor(2px) solid #0d3c84;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
}

/*
 *外边距样式定义 m是margin的缩写
 */
//mt t是top的缩写 ，上外边距定义
@each $size in 2px, 4px, 6px, 8px, 9px, 10px, 12px, 13px, 14px, 15px, 16px, 17px, 20px, 22px, 24px, 25px, 26px, 30px, 32px, 33px, 35px, 37px, 40px, 48px, 50px, 54px, 88px, 100px, 130px, 186px {
    .mt#{$size/1px} {
        margin-top: unit-convertor($size);
    }
}

@each $size in 1%, 2%, 3%, 4%, 5%, 7%, 8%, 10% {
    .mt#{$size/1%}p {
        margin-top: $size;
    }
}

//mr r是right的缩写 右外边距定义
@each $size in 5px, 8px, 10px, 13px, 15px, 16px, 18px, 20px, 24px, 30px, 32px, 43px, 50px, 69px, 80px, 160px, 213px, 264px {
    .mr#{$size/1px} {
        margin-right: unit-convertor($size);
    }
}

@each $size in 10%, 15% {
    .mr#{$size/1%}p {
        margin-right: $size;
    }
}

//mb b是bottom的缩写 下外边距定义
@each $size in 6px, 10px, 15px, 16px, 20px, 24px, 28px, 37px, 50px, 100px, 200px {
    .mb#{$size/1px} {
        margin-bottom: unit-convertor($size);
    }
}

//ml l是left的缩写 左外边距定义
@each $size in -10px, -20px, -30px, 6px, 8px, 10px, 12px, 15px, 16px, 18px, 20px, 24px, 30px, 35px, 40px, 42px, 43px, 44px, 46px, 50px, 60px, 70px, 76px, 78px, 80px, 100px, 111px, 105px, 108px, 120px, 130px, 150px, 180px, 195px, 250px {
    .ml#{$size/1px} {
        margin-left: unit-convertor($size);
    }
}

@each $size in 1%, 2%, 3%, 5%, 7%, 9%, 10%, 15%, 20%, 25%, 30%, 40% {
    .ml#{$size/1%}p {
        margin-left: $size;
    }
}

.m-center {
    margin-left: auto;
    margin-right: auto;
}

.m-auto {
    margin: 0 auto;
}

/*
 内边边距样式定义 p是padding的缩写
*/
//pa a是all的缩写
@each $size in 0px, 8px, 10px, 25px, 30px, 60px {
    .pa#{$size/1px} {
        padding: unit-convertor($size);
    }
}

//pt  t是top的缩写 上外边距定义
@each $size in 1px, 3px, 5px, 6px, 9px, 10px, 14px, 15px, 18px, 19px, 20px, 24px, 40px, 48px, 100px {
    .pt#{$size/1px} {
        padding-top: unit-convertor($size);
    }
}

//pr r是right的缩写 右外边距定义
@each $size in 5px, 8px, 10px, 12px, 15px, 16px, 20px, 22px, 24px, 26px, 30px, 50px, 192px {
    .pr#{$size/1px} {
        padding-right: unit-convertor($size);
    }
}

@each $size in 10%, 20% {
    .pr#{$size/1%}p {
        padding-right: $size;
    }
}

//pb b是bottom的缩写 下外边距定义
@each $size in 1px, 5px, 6px, 8px, 9px, 10px, 15px, 20px, 24px, 28px, 65px, 80px, 100px {
    .pb#{$size/1px} {
        padding-bottom: unit-convertor($size);
    }
}

//pl l是left的缩写 左外边距定义
@each $size in 6px, 8px, 10px, 12px, 15px, 16px, 19px, 20px, 24px, 30px, 40px, 42px, 55px, 100px, 150px {
    .pl#{$size/1px} {
        padding-left: unit-convertor($size);
    }
}

@each $size in 2%, 8%, 10%, 12%, 13%, 15%, 17%, 20%, 25% {
    .pl#{$size/1%}p {
        padding-left: $size;
    }
}

/*
宽度定义。按照宽度由小到的顺序定义
命名规范 .w**, w表示width
*/
@each $size in 14px, 16px, 20px, 30px, 40px, 45px, 60px, 70px, 74px, 76px, 77px, 80px, 84px, 88px, 95px, 100px, 112px, 122px, 130px, 148px, 160px, 170px, 188px, 200px, 230px, 250px, 255px, 288px, 300px, 320px, 322px, 340px, 350px, 356px, 387px, 400px, 456px, 475px,480px, 485px, 510px, 540px, 600px, 650px, 900px,1200px, 1350px, 1440px, 1810px, 1920px {
    .w#{$size/1px} {
        width: unit-convertor($size);
    }
}

/**
宽度按照百分比定义
命名规范 .w**p, w指width, p指percent
**/
@each $size in 5%, 10%, 13%, 15%, 18%, 20%, 23%, 25%, 26%, 27%, 30%, 35%, 40%, 45%, 47%, 49%, 50%, 60%, 70%,75%, 80%, 82%, 87%, 90%, 93%, 96%, 97%, 98%, 99%, 100% {
    .w#{$size/1%}p {
        width: $size;
    }
}

/**
最小宽度定义，如果按照宽度由小到的顺序定义
命名规范 .min-w**, min-w指min-width
**/
@each $size in 70px, 100px, 130px, 150px, 200px, 250px, 816px, 1150px {
    .min-w#{$size/1px} {
        min-width: unit-convertor($size);
    }
}

/**
最大宽度定义，如果按照宽度由小到的顺序定义
命名规范 .max-w**, max-w指max-width
**/
@each $size in 150px, 200px, 400px {
    .max-w#{$size/1px} {
        max-width: unit-convertor($size);
    }
}

/*
高度定义。按照高度由小到的顺序定义
命名规范 .h**, h表示height
*/
@each $size in 22px, 30px, 32px, 36px, 40px, 44px, 45px, 58px, 60px, 64px, 77px, 80px, 88px, 98px, 100px, 120px, 122px, 150px, 170px, 180px, 200px, 220px, 230px, 245px, 256px, 274px, 284px, 300px, 312px, 340px, 392px, 400px, 442px,450px, 460px, 500px, 600px, 700px, 760px, 800px, 920px, 1080px {
    .h#{$size/1px} {
        height: unit-convertor($size);
    }
}

/**
高度按照百分比定义
命名规范 .h**p, h指height, p指percent
**/
@each $size in 2%, 4%, 6%, 10%, 11%, 15%, 21%, 22%, 28%, 30%, 33%, 36%, 40%, 42%, 50%, 60%, 63%, 65%, 67%, 70%, 77%, 80%, 85%, 90%, 93%, 95%, 98%, 100%,120% {
    .h#{$size/1%}p {
        height: $size;
    }
}

/**
最小高度定义，如果按照高度由小到的顺序定义
命名规范 .min-h**, min-h指min-height
**/
@each $size in 100px, 150px, 180px, 200px, 800px {
    .min-h#{$size/1px} {
        min-height: unit-convertor($size);
    }
}

/**
最大高度定义，如果按照高度由小到的顺序定义
命名规范 .max-h**, max-h指max-height
**/
@each $size in 150px, 200px {
    .max-h#{$size/1px} {
        min-height: unit-convertor($size);
    }
}

/*
字体大小定义
命名规范 .font**, **表示了字体的大小
**/
@each $size in 10px, 12px, 13px, 14px, 16px, 17px, 18px, 19px, 20px, 22px, 24px, 26px, 28px, 30px, 40px, 60px {
    .font#{$size/1px} {
        font-size: unit-convertor($size);
    }
}

/**
字重定义
*/
.thin {
    font-weight: 100;
}

.extra-light {
    font-weight: 200;
}

.light {
    font-weight: 300;
}

.medium {
    font-weight: 500;
}

.semi-bold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

/*
字体和颜色定义
命名规范 txt-{ font-size }-{ color }-{ font-weight }
*/
.txt-ali-c {
    text-align: center;
}

.txt-ali-l {
    text-align: left;
}
.txt-ali-r {
    text-align: right;
}

.line-h-40 {
    line-height: unit-convertor(40px);
}

.line-h-30 {
    line-height: unit-convertor(30px);
}

.line-h-45 {
    line-height: unit-convertor(45px);
}

.line-h-20 {
    line-height: unit-convertor(20px);
}

.line-h-50 {
    line-height: unit-convertor(50px);
}

.line-h-80 {
    line-height: unit-convertor(80px);
}

.txt-c {
    color: #606266;
}

.txt-fff {
    color: $color-fff;
}

.txt-red {
    color: $color-red;
}

.txt-blue {
    color: $color-blue;
}

.txt-green {
    color: $color-green;
}

.txt-gelb {
    color: $color-gelb;
}

.w-auto {
    width: auto;
}
/**2020-4-10新增 文字图片对齐**/
.ver-ali-m {
    vertical-align: middle;
}



/*@mixin*/
@mixin display-flex($align: '', $justify: '', $direction: '', $wrap: '') {
    display: flex;

    @if $direction != '' {
        flex-direction: $direction;
    }

    @if $wrap != '' {
        flex-wrap: $wrap;
    }

    @if $align != '' {
        align-items: $align;
    }

    @if $justify != '' {
        justify-content: $justify;
    }
}

/*
 *布局定义
 */

.flex-a-center {
    @include display-flex(center);
}

.flex-a-start {
    @include display-flex(flex-start);
}

.flex-j-center {
    @include display-flex($justify: center);
}

.flex-a-center-j-end {
    @include display-flex(center, flex-end);
}

.flex-a-center-wrap {
    @include display-flex(center, flex-start, row, wrap);
}

.flex-a-center-column {
    @include display-flex($align: center, $direction: column);
}

.flex-a-center-start {
    @include display-flex($align: start, $direction: column);
}

.flex-j-center-column {
    @include display-flex($justify: center, $direction: column);
}

.flex-j-space-between {
    @include display-flex(flex-start, space-between, row);
}

.flex-j-space-around {
    @include display-flex($align: start, $justify: space-around);
}

.flex-a-center-j-space-between {
    @include display-flex(center, space-between);
}

.flex-a-center-j-center {
    @include display-flex($align: center, $justify: center);
}

.flex-a-start-j-end {
    @include display-flex(flex-start, flex-end);
}

/*
组件定义
*/
.el-btn-gross {
    padding-left: unit-convertor(80px);
    padding-right: unit-convertor(80px);
}
.el-btn-medium {
    padding-left: unit-convertor(40px);
    padding-right: unit-convertor(40px);
}
/**
  border      bdr-{方向}-{颜色}
**/
.bdr-all {
    border-width: unit-convertor(1px);
    border-color: $color-blau;
    border-style: solid;
    border-radius: 0.25rem;
}
.bdr-all-grey {
    border-width: unit-convertor(1px);
    border-color: #E8E8E8;
    border-style: solid;
    border-radius: 0.25rem;
}

.bdr-radius {
    border-style: solid;
    border-radius: unit-convertor(4px) unit-convertor(4px) unit-convertor(4px) unit-convertor(4px);
}

.bdr-rgb {
    border-width: unit-convertor(1px);
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
}

.bdr-t-c {
    border-top-color: $color-underline;
    border-top-width: unit-convertor(1px);
    border-top-style: solid;
}

.bdr-r-c {
    border-right-color: $color-underline;
    border-right-width: unit-convertor(1px);
    border-right-style: solid;
}
.bdr-l-c {
    border-left-color: $color-underline;
    border-left-width: unit-convertor(1px);
    border-left-style: solid;
}

.bdr-b-c {
    border-bottom-color: $color-underline;
    border-bottom-width: unit-convertor(1px);
    border-bottom-style: solid;
}

.bg-color {
    background-color: $color-bg;
}

.bg-fff {
    background-color: $color-fff;
}

.bg-blue {
    background-color: $color-blue;
}

.bg-red {
    background-color: $color-red;
}

.bg-gelb {
    background-color: $color-gelb;
}

/**
  display
**/
.dis-b {
    display: block;
}

.dis-inline {
    display: inline;
}

.dis-inline-b {
    display: inline-block;
}

// table 操作栏 收起 字样式
.pack {
    font-size: 12px;
    color: #2b9aca;
    cursor: pointer;
}
// table 操作栏 展开 字样式
.unfold {
    color: #2b9aca;
    cursor: pointer;
}
